﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HomeMid.ascx.cs" Inherits="SonCa.SN.ASCX.HomeMid" %>

<script src="../js/jquery.horizontal.scroll.js" type="text/javascript"></script>
<script src="../js/jquery.uploadify.min.js" type="text/javascript"></script>

<script type="text/javascript">
    var isSelected = false;
    var fileName = "";

    $(document).ready(function () {
        $(".menu > li").click(function (e) {
            switch (e.target.id) {
                case "personal_status":
                    $("#personal_status").addClass("active");
                    $("#personal_sound").removeClass("active");
                    $("div.personal_status").fadeIn();
                    $("div.personal_sound").css("display", "none");
                    break;
                case "personal_sound":
                    $("#personal_status").removeClass("active");
                    $("#personal_sound").addClass("active");
                    $("div.personal_sound").fadeIn();
                    $("div.personal_status").css("display", "none");
                    break;                
            }
            $('#horiz_container_outer').horizontalScroll();
        });

        var accountID_upload = $("#<%=hdfAccountID_upsound.ClientID%>").val();

        $("#file_upload_sound").uploadify({
            buttonImage: '../img/browse-btn.png',
            fileTypeDesc: 'Sound Files',
            fileTypeExts: '*.wav; *.mp3',
            sizeLimit: '20480',
            height: 30,
            swf: '../css/uploadify.swf',
            uploader: '../Files/ReceiveFiles.aspx?AccountID=' + accountID_upload,
            width: 120,
            onUploadSuccess: function (file, data, response) {
                var append_audio = "<li><audio controls>" +
                                      "<source src='../Files/Audios/Temps/" + file.name + "' type='audio/mpeg'>" +
                                      "<source src='../Files/Audios/Temps/" + file.name + "' type='audio/wav'>" +
                                      "<source src='../Files/Audios/Temps/" + file.name + "' type='audio/ogg'>" +
                                      "<object height='50' width='100' data='../Files/Audios/Temps/" + file.name + "'></object>" +
                                      "Your browser does not support this audio format." +
                                    "</audio></li>";
                $("#horiz_container").append(append_audio);
                isSelected = true;
                fileName = file.name;
            }
        });
    });

    function PostAudio() {
        if (isSelected == true) {
            var statusAudio = $("#txtStatusWithAudio").val();
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ statusText: statusAudio, statusType: 4, fileNameUpdate: fileName }),
                url: "../Services/AjaxService.svc/SaveStatus",
                dataType: "json",
                success: function (response) {
                    if (response.d != "") {
                        $("#personal_display").prepend(response.d);
                        $("#txtStatusWithAudio").val("");
                        $("#horiz_container").empty();
                        isSelected = false;
                        $.ajax({
                            type: "post",
                            url: "../Services/AjaxService.svc/DeleteUploadTemps",
                            data: '{"filename": "' + fileName + '","folder": "Audios"}',
                            contentType: "application/json; charset=utf-8;",
                            dataType: "json",
                            success: function () {

                            }
                        });
                    }
                    else
                        alert("Có lỗi xảy ra, vui lòng thử lại sau vài phút.");
                },
                error: function (response) { alert(response.d); }
            });
        }
    }
</script>

<div class="span6 box_center">        
    <div class="row">
        <div class="span6">
            <div class="mgtop30 container" style="width:748px">
                <asp:HiddenField ID="hdfAccountID_upsound" runat="server" />
                <ul class="menu">
                    <li id="personal_status" class="icon_update title6 cpos_1 active" style="cursor:pointer;margin-left:-130px">Update status</li>
                    <li id="personal_sound" class="icon_upload title6 cpos_1 mgleft40" style="cursor:pointer">Upload bản thu</li>
                    <li id="personal_link" class="icon_upload title6 cpos_1 mgleft40" style="cursor:pointer">Link</li>
                    <li id="personal_photo" class="icon_upload title6 cpos_1 mgleft40" style="cursor:pointer">Photo</li>
                </ul>
                <span class="clear"></span>

                <!-- Update Status -->
                <div class="content personal_status">
                    <textarea style="max-width:740px;height:52px;border:none" placeholder="Chia sẻ với bạn bè .................................................."></textarea><br />
                    <img src="../img/share.png" class="shareBtn" style="cursor:pointer" />
                </div>
                <!-- End Update Status -->

                <!-- Upload thu am -->
                <div class="content personal_sound" style="display:none">
                    <div id="wrap">
                        <textarea id="txtStatusWithAudio" style="max-width:740px;height:52px;border:none" placeholder="Comment for your sound..."></textarea>
                        <h4>Choose Sound from your computer</h4><br />
                        <input id="file_upload_sound" type="file" multiple="true"/>
                        <ul id="horiz_container_outer">
                            <li id="horiz_container_inner">
                                <ul id="horiz_container"></ul>
                            </li>
                        </ul>
                    </div>
                    <div id="scrollbar">
                        <a id="left_scroll" class="mouseover_left" href="#"></a>
                        <div id="track">
                            <div id="dragBar"></div>
                        </div>
                        <a id="right_scroll" class="mouseover_right" href="#"></a>
                    </div><br />
                    <img src="../img/share.png" class="shareBtn" style="cursor:pointer" onclick="PostAudio();return false;"/>
                </div>
                <!-- End Upload thu am -->                
            </div>
        </div>   
    </div>        
</div>